<script lang="ts" setup>
import { SimpleScrollbar } from '@sa/materials';
import { ref } from 'vue';

const isShow = ref(false);
interface Emits {
  (e: 'change', id: string): void;
}
const emit = defineEmits<Emits>();
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  id: {
    type: String,
    default: ''
  }
});
const { list } = props;
const title = ref('');
const checkId = ref('');

const handleSelect = _id => {
  checkId.value = _id;
  list.forEach(item => {
    if (item.id == _id) {
      title.value = item.deviceName;
    }
  });
  isShow.value = false;
  emit('change', _id);
};

const setCheckId = (id: any, showTitle: any) => {
  console.log(id, showTitle, 'sssssssssssssss')
  checkId.value = id;
  title.value = showTitle;
};
defineExpose({
  setCheckId
});
</script>

<template>
  <div :id="id" class="selectBox" :data-id="checkId">
    <div class="warp" @click="isShow = !isShow">
      <span>{{ title }}</span>
      <img style="user-select: none" src="../../../assets/imgs/breedDetails/ic_pulldown@2x.png" alt="" />
    </div>
    <ul v-show="isShow" class="warp-list">
      <SimpleScrollbar style="max-height: 200px">
        <div style="max-height: 200px">
          <template v-for="item in list">
            <li :class="checkId == item.id ? 'check-item' : ''" @click="handleSelect(item.id)">
              {{ item.deviceName }}
            </li>
          </template>
        </div>
      </SimpleScrollbar>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.selectBox {
  position: relative;
  margin-left: 20px;

  .warp {
    cursor: pointer;
    padding: 4px 12px;
    background: linear-gradient(180deg, #3674a3 0%, #1d3e79 100%);
    border-radius: 2px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(56, 116, 202, 1), rgba(59, 110, 183, 1)) 1 1;
    display: flex;
    align-items: center;

    span {
      font-weight: 400;
      font-size: 14px;
      color: #a2deff;
      width: 150px; /* 设置固定宽度 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }

    img {
      width: 20px;
      height: 20px;
    }
  }

  .warp-list {
    width: 100%;
    position: absolute;
    z-index: 9;
    top: 35px;
    left: 0;
    background: #19296a;
    border-radius: 2px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(56, 116, 202, 1), rgba(59, 110, 183, 1)) 1 1;
    padding: 8px 0;

    li {
      margin: 0 6px;
      padding: 1px 6px;
      font-weight: 400;
      font-size: 14px;
      color: #a2deff;
      cursor: pointer;

      &:hover {
        font-weight: 400;
        font-size: 14px;
        color: #fff6a2;
        background: rgba(255, 255, 255, 0.11);
        border-radius: 2px;
      }
    }
  }
}
</style>
